<template>
  <el-card class="cmd-log-container" :body-style="{height: 'calc(100% - 40px)'}">
    <div class="cmd-log-content">
      <el-table
        :data="data"
        class="table"
        height="100%"
        :border="true"
        :lazy="true"
        empty-text="暂无数据"
        ref="$tableContainer"
      >
        <el-table-column
          prop="time"
          label="时间"
          header-align="center"
          align="left"
          width="160px"
          :resizable="false"
        >
        </el-table-column>
        <el-table-column
          prop="method"
          label="执行方式"
          header-align="center"
          align="center"
          width="80px"
          :resizable="false"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          header-align="center"
          align="center"
          min-width="130px"
          :resizable="false"
        >
        </el-table-column>
        <el-table-column
          prop="result"
          label="执行结果"
          header-align="center"
          align="center"
          width="80px"
          :resizable="false"
        >
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "CmdLogCard"
}
</script>

<script setup>
import {ref, watch, nextTick, computed} from 'vue'
import {useStore} from 'vuex'

const store = useStore()
const data = computed(() => store.state.station.cmdLogCard.logData)
const $tableContainer = ref(null)
watch(data, () => {
  const tableBodyWrapper = $tableContainer.value.$el.childNodes[2]
  if(tableBodyWrapper) {
    nextTick(() => {
      tableBodyWrapper.scrollTop = tableBodyWrapper.scrollHeight;
    })
  }
})

</script>

<style scoped lang="sass">
.cmd-log-container
  box-sizing: border-box
  width: 100%
  height: 100%

  .cmd-log-content
    width: 100%
    height: 100%
    background-color: cornflowerblue

    //.table
    //  width: 100%
    //  height: 100%
</style>
